#{extends 'main.html' /}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript"
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<title>Uploading</title>
<script type="text/javascript"
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

    <!-- Start Mohamed Ragab 
this section i used java script to do the control the uploading process and show the browse and
the upload buttons 
@author Mohamed Ragab -->

<script type="text/javascript">
	$(document).ready(
			function() {
				$('#ud').removeAttr("style");
				$('#but').hide();
				$('#chk').hide();
				$('#up').change(
						function() {
							var ext = $('#up').val().split('.').pop()
									.toLowerCase();
							if ($.inArray(ext, [ 'gif', 'png', 'jpg', 'jpeg',
									'flv', 'wmv', 'mp3' ]) == -1) {
								alert('invalid extension!');
								$('#but').hide();
							} else {
								if ($.inArray(ext, [ 'gif', 'png', 'jpg',
										'jpeg' ]) != -1)
									$('#type').attr("value", 'image');
								if ($.inArray(ext, [ 'flv', 'wmv' ]) != -1) {
									$('#chk').show();
									$('#type').attr("value", 'video');
								}
								if ($.inArray(ext, [ 'mp3' ]) != -1) {
									$('#type').attr("value", 'audio');
									$('#chk').show();
								}

								$('#but').show();
							}
						});
			});
</script>
<script type="text/javascript">
	$(document).ready(
			function() {
				$('#ud').removeAttr("style");
				$('#but').hide();
				$('#chk').hide();
				$('#up').change(
						function() {
							var ext = $('#up').val().split('.').pop()
									.toLowerCase();
							if ($.inArray(ext, [ 'gif', 'png', 'jpg', 'jpeg',
									'flv', 'wmv', 'mp3' ]) == -1) {
								alert('invalid extension!');
								$('#but').hide();
							} else {
								if ($.inArray(ext, [ 'gif', 'png', 'jpg',
										'jpeg' ]) != -1)
									$('#type').attr("value", 'image');
								if ($.inArray(ext, [ 'flv', 'wmv' ]) != -1) {
									$('#chk').show();
									$('#type').attr("value", 'video');
								}
								if ($.inArray(ext, [ 'mp3' ]) != -1) {
									$('#type').attr("value", 'audio');
									$('#chk').show();
								}

								$('#but').show();
							}
						});
			});
</script>

    <!-- this section i used java script to do methods "progress_clear", "progress_update", 
"progress_stop", to control the uploading stream process in the tutorial page
@author Mohamed Ragab  -->

</head>
<body>


	<h3>Upload media files for the tutorial</h3>
	#{if session.get("RegisteredUserId")!=null}
	<h3>The accepted files extensions:</h3>
	<h3>Images: gif or png or jpg or jpeg</h3>
	<h3>Audios: mp3</h3>
	<h3>Videos: wmv or flv</h3>
	
	<noscript>Please enable javascript to upload</noscript>
	<div id="ud">
		
		<script language="javascript">
			var progressEnd = 9; // set to number of progress <span>'s.
			var progressColor = 'blue'; // set to progress bar color
			var progressInterval = 1000; // set to time between updates (milli-seconds)

			var progressAt = 0;
			var progressTimer;
			function progress_clear() {
				for ( var i = 1; i <= progressEnd; i++)
					document.getElementById('progress' + i).style.backgroundColor = 'transparent';
				progressAt = 0;
			}
			function progress_update() {
				document.getElementById('showbar').style.visibility = 'visible';
				progressAt++;
				if (progressAt > progressEnd) {
					progress_stop();
					document.getElementById("form1").submit();
				
				}

				else
					document.getElementById('progress' + progressAt).style.backgroundColor = progressColor;
				progressTimer = setTimeout('progress_update()',
						progressInterval);
			}
			function progress_stop() {
				clearTimeout(progressTimer);
				progress_clear();
				document.getElementById('showbar').style.visibility = 'hidden';
			}
			
		</script>


		<table>
			<tr>
				<td>
					<div id="showbar"
						style="font-size: 8pt; padding: 2px; border: solid black 1px; visibility: hidden">
						<span id="progress1">&nbsp; &nbsp;</span> <span id="progress2">&nbsp;
							&nbsp;</span> <span id="progress3">&nbsp; &nbsp;</span> <span
							id="progress4">&nbsp; &nbsp;</span> <span id="progress5">&nbsp;
							&nbsp;</span> <span id="progress6">&nbsp; &nbsp;</span> <span
							id="progress7">&nbsp; &nbsp;</span> <span id="progress8">&nbsp;
							&nbsp;</span> <span id="progress9">&nbsp; &nbsp;</span>
					</div></td>
			</tr>
		</table>
		
    <!-- in this section i return the media files for each tutorial and check the 
     type of the file if it image or video or audio, and each types has it own viewing shapes 
@author Mohamed Ragab -->

		#{form @addFile(), enctype:'multipart/form-data',id:'form1'} <input
			id="up" type="file" name="media.photo"> <input id="type"
			type="hidden" name="type" value="nothing" /><br>
		<div id="chk">
			<input type="checkbox" name="autoplay" value="1" /> auto play of
			this media
		</div>

		<input class="button" onclick="progress_update()" type="button"
			value="Upload"> #{/form}
	</div>
	#{list items:controllers.Tutorials.findUploads(), as:'RegisteredUser'}
	#{if RegisteredUser.type =="image"}

	<BR>
	<img id="${RegisteredUser.id}"
		src="@{Application.userPhoto(RegisteredUser.id)}" WIDTH="500"
		HEIGHT="400">
	<br>
	<br>

	<br> #{/if} #{if RegisteredUser.type =="audio"}

	<BR>
	<embed src="@{Application.userPhoto(RegisteredUser.id)}" width="200"
		height="50" autostart="${RegisteredUser.autoplay}" loop="FALSE">
	</embed>
	<br>
	<br>
	<br> #{/if} #{if RegisteredUser.type =="video"}

	<BR>


	<EMBED SRC="@{Application.userPhoto(RegisteredUser.id)}" WIDTH="500"
		HEIGHT="400" AUTOPLAY="${RegisteredUser.autoplay}" LOOP="false"></EMBED>
	<br>
	<br>
	<br> #{/if} #{/list}  #{/if}
	
	<!-- End Mohamed Ragab -->
	
	<p>
		Relation Page :) <br> Please Choose the Title of the Tutorial you
		want to relate with and select the relation
	</p>

	<!-- this html file is for the creator to choose the relation of the created tutorial with another 
    tutorial by choosing title from drop down list
     and selecting the relation from other drop list which will be
     sent to the relationPage() in the controller
     @author Yasmin Gamal
     @param tutorial ID ,relation and title -->
     
      #{ifnot Tutorials}
			<p>No tutorials yet to relate with..</p>
			 #{/ifnot} #{else}
     
	<form action="@{Tutorials.relationPage()}" method="POST">
		<h1>Relations Tutorials</h1>
		<input name="TutorialId" style="display: none;" value=${currentTut.id}></input>
		Choose one of the available Titles you want to relate your created
		tutorial with: <select name="title" id="mySelect">
		 
			#{list items:Tutorials,as:'TutorialTitle'}
			<ul>
				Title of the Tutorial :
				</br>
				<option>
					<li><p>${TutorialTitle.Title.raw()}</p>
					</li>
				</option>

			</ul> #{/list}
		</select>
		#{/else}
		<p align="center">

			<span style="color: #c00" class="error">#{error 't' /}</span><br>

			Select the Relation: <select name="relation" id="mySelect">
				<option>similar</option>
				<option>replace</option>
				<option>required to</option>
				<option>required for</option>
				<option>part of</option>
			</select> <input type="submit" value="Done" />
		<ul>
			<li><a href="/Application/updates.html">Skip The relation
					Page</a>
			</li>
		</ul>

	</form>
</body>
</html>